<template>
  <div class="nav">
    <router-link class="nav-name nav-base" :to="{name:'home'}">
      拾记
      <!-- 拾初心，记时光 -->
    </router-link>
    <div class="nav-inner nav-base">
      <router-link
        class="nav-item"
        v-for="(item, i) in NavList"
        :key="i"
        :to="{ name: item.link }"
        @click="tosearch(i)"
        ><i :class="['iconfont', item.icon]"></i>{{ item.name }}</router-link
      >
      <div
        class="nav-item"
        @click="showsearch"
        ><i class="iconfont icon-sousuoxiao"></i>搜素</div
      >
    </div>
    <div class="nav-inner-small nav-base">
      <i class="iconfont icon-sousuoxiao" @click="showsearch"></i>
      <i class="iconfont icon-caidan" @click="show"></i>
    </div>
  </div>
</template>

<script>

import { showMask } from "@/components/mask/mask";

export default {
  data() {
    return {
      NavList: [
        {
          link: "home",
          name: "首页",
          icon: "icon-home",
        },
        {
          link: "class",
          name: "分类",
          icon: "icon-yingyong",
        },
        {
          link: "tab",
          name: "标签",
          icon: "icon-biaoqian",
        },
        {
          link: "archive",
          name: "归档",
          icon: "icon-wendang",
        },
        {
          link: "photo",
          name: "相册",
          icon: "icon-xiangce",
        },
        {
          link: "message",
          name: "留言",
          icon: "icon-liuyan",
        },
      ],
    };
  },
  methods: {
    // 获取页面滚动距离
    handleScroll() {
      var nav = document.querySelector(".nav");
      let H = nav.offsetHeight;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop >= H) {
        nav.style.background = "#FFF";
        document.documentElement.style.setProperty("--color-nav", "#333");
      } else {
        nav.style.background = "transparent";
        document.documentElement.style.setProperty("--color-nav", "#FFF");
      }
    },
    show() {
      showMask();
      this.$bus.$emit("showDrawer");
    },
    showsearch() {
      this.$bus.$emit("showsearch");
    },
    tosearch(i) {
      if (i == 6) {
        this.showsearch();
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
};
</script>

<style>
</style>
<style lang="scss" scoped>
.nav {
  background-color: transparent;
  width: 100vw;
  padding: 15px 30px;
  transition: background 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  .nav-name {
    display: block;
    font-size: 20px;
    font-weight: 800;
    width: fit-content;
    float: left;
    color: var(--color-nav);
  }
  .nav-base {
    line-height: calc(4vw - 2vw);
  }
  .nav-inner {
    float: right;
    display: flex;
    .nav-item {
      color: var(--color-nav);
      font-size: 16px;
      padding: 0 0.25vw;
      position: relative;
      i {
        margin-right: 0.5vw;
      }
      &:nth-child(n + 1) {
        margin-left: 0.5vw;
      }
    }
  }
  .nav-inner-small {
    height: 100%;
    color: var(--color-nav);
    float: right;
    display: none;
    & > i:nth-child(1) {
      margin-right: 3vw;
    }
  }
}
@media screen and (max-width: 750px) {
  .nav > .nav-inner {
    display: none;
  }
  .nav > .nav-inner-small {
    display: block;
  }
  .nav-name {
    font-size: 3vw !important;
  }
  .nav-item {
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 750px) {
  .nav-inner {
    .nav-item {
      &::before {
        position: absolute;
        bottom: 0;
        content: "";
        display: block;
        width: 0;
        height: 0.2em;
        background-color: #ffdd00;
        transition: width 0.75s;
      }
      &:hover::before {
        width: 100%;
        transition: width 0.75s;
      }
    }
  }
}
</style>